<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button v-if="active >= 1" @click="lastSetp" type="primary"
            >上一步</el-button
          >
          <el-button v-if="active < 2" @click="next" type="primary"
            >下一步</el-button
          >
          <el-button v-if="active == 2" @click="dataFormSubmit" type="primary"
            >保存</el-button
          >
          <el-button v-if="active == 2" @click="saveAndPublish" type="primary"
            >发布</el-button
          >
          <el-button @click="goBack"> 取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '1000px' }"
      >
        <el-steps
          finish-status="success"
          simple
          :active="active"
          style="width: 1000px; margin: 0 auto; position: relative"
        >
          <el-step title="基础信息"></el-step>
          <el-step title="学校内容"></el-step>
          <el-step title="设置"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <el-form
          v-loading="loading"
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          size="small"
          label-width="130px"
          label-position="right"
        >
          <template v-if="!loading">
            <template v-if="active == 0">
              <el-col :span="24">
                <el-form-item label-width="0">
                  <groupTitle content-position="left" content="基本信息">
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="封面" prop="cover">
                  <div style="display: flex; flex-direction: row">
                    <img
                      :src="define.comUrl + dataForm.cover"
                      class="el-upload-list__item-thumbnail"
                      :z-index="10000"
                      ref="image"
                      fit="cover"
                      style="height: 100px; width: 160px"
                    />
                    <div
                      style="
                        margin-left: 20px;
                        line-height: 22px;
                        font-weight: 200;
                      "
                    >
                      <el-button type="primary" @click="openUploadDialog">
                        上传图片
                      </el-button>
                      <div
                        style="color: #8c8c8c; margin-top: 3px"
                        data-v-0796f1a5=""
                      >
                        封面将按16:9显示
                      </div>
                      <div style="color: #8c8c8c" data-v-0796f1a5="">
                        最佳分辨率：570*322
                      </div>
                      <div style="color: #8c8c8c" data-v-0796f1a5="">
                        支持格式：jpg、jpeg、png
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input
                    v-model="dataForm.name"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="目录" prop="categoryId">
                  <TreeSelect
                    v-model="dataForm.categoryId"
                    placeholder="请选择"
                    clearable
                    filterable
                    :options="categoryIdOptions"
                    :props="categoryIdProps"
                    :style="{ width: '100%' }"
                  >
                  </TreeSelect>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="限制时间" prop="limitTime">
                  <el-switch
                    v-model="dataForm.limitTime"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="dataForm.limitTime">
                <el-form-item label="开始时间" prop="startDatetime">
                  <el-date-picker
                    v-model="dataForm.startDatetime"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="timestamp"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="dataForm.limitTime">
                <el-form-item label="截至时间" prop="endDatetime">
                  <el-date-picker
                    v-model="dataForm.endDatetime"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="timestamp"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="说明" prop="description">
                  <el-input
                    v-model="dataForm.description"
                    placeholder="请输入介绍"
                    :style="{ width: '100%' }"
                    true
                    type="textarea"
                    :autosize="{ minRows: 8, maxRows: 8 }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </template>
            <template v-if="active == 1">
              <el-col :span="24">
                <el-form-item label-width="0">
                  <groupTitle content-position="left" content="阶段任务">
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-tabs
                  v-model="activeStage"
                  type="card"
                  editable
                  @edit="handleTabsEdit"
                  tab-position="top"
                  class="mb-20"
                >
                  <el-tab-pane
                    :key="stage.name + stage.sortCode"
                    v-for="(stage, index) in dataForm.subjectStageList"
                    :label="'阶段' + stage.sortCode"
                    :name="stage.name + stage.sortCode"
                  >
                    <el-col :span="24">
                      <el-collapse
                        :accordion="false"
                        v-model="activeStageInfo"
                        class="mb-20"
                      >
                        <el-collapse-item title="阶段信息" name="1">
                          <el-col :span="24">
                            <el-form-item label="阶段名称">
                              <el-input
                                v-model="stage.name"
                                placeholder="请输入阶段名称"
                                :maxlength="50"
                                :style="{ width: '100%' }"
                              >
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="24">
                            <el-form-item label="说明" prop="description">
                              <el-input
                                v-model="stage.description"
                                placeholder="请输入"
                                :maxlength="500"
                                :style="{ width: '100%' }"
                                true
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 4 }"
                              >
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="24">
                            <el-form-item label="阶段内闯关" prop="challenge">
                              <el-switch
                                v-model="stage.challenge"
                                :active-value="1"
                                :inactive-value="0"
                              >
                              </el-switch>
                            </el-form-item>
                          </el-col>
                          <el-col :span="24">
                            <el-form-item label="排序" prop="sortCode">
                              <el-input-number
                                v-model="stage.sortCode"
                                placeholder="数字文本"
                                :min="1"
                                :step="1"
                                controls-position="right"
                              >
                              </el-input-number>
                            </el-form-item>
                          </el-col>
                        </el-collapse-item>
                      </el-collapse>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label-width="0">
                        <div class="jsbos-common-title">
                          <h2>学习内容</h2>
                          <div>
                            <el-button
                              type="text"
                              icon="el-icon-plus"
                              @click="openTemsCourseList(stage)"
                              >在线课程</el-button
                            >
                            <el-button
                              type="text"
                              icon="el-icon-plus"
                              @click="openTemsExamList(stage)"
                              >在线考试</el-button
                            >
                          </div>
                        </div>

                        <el-table
                          :data="stage.temsSubjectStageRelationList"
                          size="mini"
                        >
                          <el-table-column
                            type="index"
                            width="50"
                            label="序号"
                            align="center"
                          />
                          <el-table-column prop="objectType" label="对象类型">
                            <template slot-scope="scope">
                              <span>{{
                                scope.row.objectType
                                  | dynamicText(objectTypeOptions)
                              }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column prop="objectName" label="名称">
                          </el-table-column>
                          <el-table-column prop="type" label="类型">
                            <template slot-scope="scope">
                              <el-select
                                v-model="scope.row.type"
                                placeholder="请选择"
                                clearable
                                :style="{ width: '100%' }"
                              >
                                <el-option
                                  v-for="(item, index) in typeOptions"
                                  :key="index"
                                  :label="item.fullName"
                                  :value="item.id"
                                  :disabled="item.disabled"
                                ></el-option>
                              </el-select>
                            </template>
                          </el-table-column>
                          <el-table-column prop="sortCode" label="排序">
                          </el-table-column>
                          <el-table-column label="操作" width="50">
                            <template slot-scope="scope">
                              <el-button
                                size="mini"
                                type="text"
                                class="jsbos-table-delBtn"
                                @click="
                                  delTemsSubjectStageRelationList(scope.$index)
                                "
                              >
                                删除
                              </el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-form-item>
                    </el-col>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
              <el-col :span="24">
                <el-form-item label="阶段间闯关" prop="interphaseChallenges">
                  <el-switch
                    v-model="dataForm.interphaseChallenges"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="同步学习进度" prop="syncProgress">
                  <el-switch
                    v-model="dataForm.syncProgress"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="逾期后可学" prop="overdueLearning">
                  <el-switch
                    v-model="dataForm.overdueLearning"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
            </template>
            <template v-if="active == 2">
              <el-col :span="24">
                <el-form-item label-width="0">
                  <groupTitle content-position="left" content="可见范围">
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="可见类型" prop="scopeType">
                  <el-radio-group v-model="dataForm.scopeType" size="small">
                    <el-radio
                      v-for="(item, index) in scopeTypeOptions"
                      :key="index"
                      :label="item.id"
                      :disabled="item.disabled"
                    >
                      {{ item.fullName }}
                    </el-radio>
                  </el-radio-group>
                  <filterSelect
                    v-if="dataForm.scopeType == 'select'"
                    width="500px"
                    v-model="dataForm.scope"
                  ></filterSelect>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label-width="0">
                  <groupTitle content-position="left" content="文档学习设置">
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="开启文档学习时长" prop="docsLearning">
                  <el-switch
                    v-model="dataForm.docsLearning"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                  <el-input-number
                    v-model="dataForm.docsLearningLength"
                    :disabled="dataForm.docsLearning == 0"
                    placeholder="数字文本"
                    :step="1"
                    controls-position="right"
                    min="0"
                    style="width: 100px; margin-left: 10px; margin-right: 5px"
                  >
                  </el-input-number>
                  秒/页
                  如不设置文档学习时长，学员学习文档类的【知识】将不计时长，进入学习界面就完成
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label-width="0">
                  <groupTitle content-position="left" content="完成条件">
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <p style="color: #8c8c8c; margin-bottom: 20px">
                  当达到设置的值后，培训内容才算完成，以下要求中必须设置一项
                </p>
              </el-col>
              <el-col :span="24" class="box-row-group">
                <el-form-item label="必修资源要求" prop="required">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                  >
                    <div>
                      <el-switch
                        v-model="dataForm.required"
                        :active-value="1"
                        :inactive-value="0"
                      >
                      </el-switch>
                      <span style="color: #8c8c8c; margin-left: 10px"
                        >在规定的时间内，必修资源需要完成的个数</span
                      >
                    </div>
                    <div style="margin-right: 50px">
                      <el-input-number
                        v-model="dataForm.requiredCompleted"
                        :disabled="dataForm.required == 0"
                        placeholder="数字文本"
                        :step="1"
                        controls-position="right"
                        style="width: 100px"
                      >
                      </el-input-number
                      >/{{ dataForm.requiredTotal || 1 }}
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="box-row-group">
                <el-form-item label="选修资源要求" prop="elective">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                  >
                    <div>
                      <el-switch
                        v-model="dataForm.elective"
                        :active-value="1"
                        :inactive-value="0"
                      >
                      </el-switch>
                      <span style="color: #8c8c8c; margin-left: 10px"
                        >在规定的时间内，选修资源需要完成的个数</span
                      >
                    </div>
                    <div style="margin-right: 50px">
                      <el-input-number
                        v-model="dataForm.electiveCompleted"
                        :disabled="dataForm.elective == 0"
                        placeholder="数字文本"
                        :step="1"
                        controls-position="right"
                        style="width: 100px"
                      >
                      </el-input-number
                      >/{{ dataForm.electiveTotal || 1 }}
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label-width="0">
                  <groupTitle content-position="left" content="学习奖励">
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="证书模板" prop="certificateId">
                  <el-input
                    v-model="dataForm.certificateName"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                    @onfocus="addTemsCertList"
                  >
                    <el-button slot="append" @click="addTemsCertList('cert')"
                      >选择</el-button
                    >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="勋章" prop="medalId">
                  <el-input
                    v-model="dataForm.medalName"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                    @onfocus="addTemsCertList"
                  >
                    <el-button slot="append" @click="addTemsCertList('modal')"
                      >选择</el-button
                    >
                  </el-input>
                </el-form-item>
              </el-col>
            </template>
          </template>
        </el-form>
      </el-row>
      <SelectCert
        v-if="selectCertVisible"
        tabActiveName="select"
        ref="selectCertRef"
        @selectComplete="selectCompleteCert"
      >
      </SelectCert>
      <SelectCover
        v-if="selectCoverVisible"
        ref="selectCoverRef"
        @selectComplete="selectCover"
      >
      </SelectCover>

      <SelectCourse
        v-if="selectCourseVisible"
        tabActiveName="select"
        ref="selectCourseRef"
        @selectComplete="selectCompleteCourse"
      >
      </SelectCourse>

      <SelectExam
        v-if="selectExamVisible"
        tabActiveName="select"
        ref="selectExamRef"
        @selectComplete="selectCompleteExam"
      >
      </SelectExam>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
import FilterSelect from "@/components/Generator/components/filterSelect/index.vue";
import SelectCert from "@/views/tems/cert/template/SelectCert.vue";
import SelectCover from "@/views/tems/course/cover/Form.vue";
import SelectCourse from "@/views/tems/course/manager/SelectCourse.vue";
import SelectExam from "@/views/exam/manager/SelectExam.vue";

export default {
  components: {
    SelectCover,
    SelectCert,
    SelectExam,
    SelectCourse,
    FilterSelect,
  },
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      isDetail: false,
      selectCoverVisible: false,
      selectCertVisible: false,
      selectCourseVisible: false,
      selectExamVisible: false,
      activeStage: "1",
      activeStageInfo: ["1"],
      active: 0,
      dataForm: {
        cover: "",
        name: "",
        categoryId: "",
        limitTime: 0,
        startDatetime: "",
        endDatetime: "",
        description: "",
        interphaseChallenges: 0,
        syncProgress: 0,
        overdueLearning: 0,
        scopeType: "1",
        docsLearning: 0,
        docsLearningLength: 10,
        required: 0,
        requiredCompleted: 0,
        requiredTotal: 1,
        elective: 0,
        electiveCompleted: 0,
        electiveTotal: 1,
        certificateId: "",
        certificateName: "",
        medalId: "",
        medalName: "",
        enabledMark: "0",
        creatorUserId: "",
        creatorTime: "",
        subjectStageList: [
          {
            subjectId: "",
            name: "学习内容",
            description: "",
            challenge: 0,
            sortCode: 1,
            temsSubjectStageRelationList: [],
          },
        ], //阶段信息
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        limitTime: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
      },
      categoryIdOptions: [],
      categoryIdProps: {
        children: "children",
        label: "fullName",
        value: "enCode",
      },
      scopeTypeOptions: [
        { fullName: "全公司", id: "all" },
        { fullName: "仅创建人", id: "creator" },
        {
          fullName: "指定人员",
          id: "select",
        },
      ],
      enabledMarkOptions: [
        { fullName: "未发布", id: "0" },
        { fullName: "已发布", id: "1" },
      ],
      certType: "cert",
      typeOptions: [
        { fullName: "选修 ", id: "1" },
        { fullName: "必修", id: "2" },
      ],
      objectTypeOptions: [
        { fullName: "在线课程", id: "Course" },
        { fullName: "在线考试", id: "Exam" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getCategoryIdOptions();
  },
  mounted() {},
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === "add") {
        let subjectStageLength = this.dataForm.subjectStageList.length + 1;
        let subjectStageDefault = {
          subjectId: "",
          name: "学习内容",
          description: "",
          challenge: 0,
          sortCode: subjectStageLength,
          temsSubjectStageRelationList: [],
        };
        this.dataForm.subjectStageList.push(subjectStageDefault);
        this.activeStage =
          subjectStageDefault.name + subjectStageDefault.sortCode;
      }
      if (action === "remove") {
        let tabs = this.dataForm.subjectStageList;
        let activeName = this.activeStage;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.activeStage = activeName;
        this.dataForm.subjectStageList = tabs.filter(
          (tab) => tab.name !== targetName
        );
      }
    },
    selectCover(coverUlr) {
      this.dataForm.cover = coverUlr;
    },
    openUploadDialog() {
      this.selectCoverVisible = true;
      this.$nextTick(() => {
        this.$refs.selectCoverRef.initData();
      });
    },
    addTemsCertList(type) {
      this.certType = type;
      this.selectCertVisible = true;
      this.$nextTick(() => {
        this.$refs.selectCertRef.initData();
      });
    },
    selectCompleteCert(objectList) {
      if (objectList.length > 0) {
        let data = objectList[0];
        if (this.certType == "cert") {
          this.dataForm.certificateId = data.id;
          this.dataForm.certificateName = data.name;
        } else if (this.certType == "modal") {
          this.dataForm.medalId = data.id;
          this.dataForm.medalName = data.name;
        }
      }
    },
    openTemsCourseList(stageRelation) {
      this.stageRelation = stageRelation;
      this.selectCourseVisible = true;
      this.$nextTick(() => {
        this.$refs.selectCourseRef.initData();
      });
    },
    openTemsExamList(stageRelation) {
      this.stageRelation = stageRelation;
      this.selectExamVisible = true;
      this.$nextTick(() => {
        this.$refs.selectExamRef.initData();
      });
    },
    selectCompleteCourse(objectList) {
      if (objectList.length > 0) {
        this.dataForm.subjectStageList.forEach((stage, index) => {
          if (stage.name + stage.sortCode === this.activeStage) {
            objectList.forEach((item, index) => {
              let sortCode = stage.temsSubjectStageRelationList.length + 1;
              stage.temsSubjectStageRelationList.push({
                subjectId: undefined,
                subjectStageId: undefined,
                objectType: "Course",
                objectId: item.id,
                objectName: item.name,
                type: "1",
                sortCode: sortCode,
              });
            });
          }
        });
      }
    },
    selectCompleteExam(objectList) {
      if (objectList.length > 0) {
        this.dataForm.subjectStageList.forEach((stage, index) => {
          if (stage.name + stage.sortCode === this.activeStage) {
            objectList.forEach((item, index) => {
              let sortCode = stage.temsSubjectStageRelationList.length + 1;
              stage.temsSubjectStageRelationList.push({
                subjectId: undefined,
                subjectStageId: undefined,
                objectType: "Exam",
                objectId: item.id,
                objectName: item.fullName,
                type: "1",
                sortCode: sortCode,
              });
            });
          }
        });
      }
    },
    lastSetp() {
      this.active--;
    },
    next() {
      this.active++;
    },
    saveAndPublish() {
      this.dataForm.enabledMark = "1";
      this.dataFormSubmit();
    },
    getCategoryIdOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "SubjectCategory",
        })
        .then((res) => {
          this.categoryIdOptions = res;
        });
    },
    goBack() {
      this.$emit("refresh");
    },
    clearData(data) {
      for (let key in data) {
        if (data[key] instanceof Array) {
          data[key] = [];
        } else if (data[key] instanceof Object) {
          this.clearData(data[key]);
        } else {
          data[key] = "";
        }
      }
      let subjectStageLength = this.dataForm.subjectStageList.length + 1;
      let subjectStageDefault = {
        subjectId: "",
        name: "学习内容",
        description: "",
        challenge: 0,
        sortCode: subjectStageLength,
        temsSubjectStageRelationList: [],
      };
      this.dataForm.subjectStageList.push(subjectStageDefault);
      this.activeStage =
        subjectStageDefault.name + subjectStageDefault.sortCode;
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/course/TemsSubject/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        } else {
          this.clearData(this.dataForm);
        }
      });
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.request();
        }
      });
    },
    request() {
      var _data = this.dataList();
      if (!this.dataForm.id) {
        request({
          url: "/api/course/TemsSubject",
          method: "post",
          data: _data,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        });
      } else {
        request({
          url: "/api/course/TemsSubject/" + this.dataForm.id,
          method: "PUT",
          data: _data,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        });
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      _data.limitTime = parseInt(_data.limitTime);
      _data.interphaseChallenges = parseInt(_data.interphaseChallenges);
      _data.syncProgress = parseInt(_data.syncProgress);
      _data.overdueLearning = parseInt(_data.overdueLearning);
      _data.docsLearning = parseInt(_data.docsLearning);
      _data.required = parseInt(_data.required);
      _data.elective = parseInt(_data.elective);
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.limitTime = parseInt(_dataAll.limitTime);
      _dataAll.interphaseChallenges = parseInt(_dataAll.interphaseChallenges);
      _dataAll.syncProgress = parseInt(_dataAll.syncProgress);
      _dataAll.overdueLearning = parseInt(_dataAll.overdueLearning);
      _dataAll.docsLearning = parseInt(_dataAll.docsLearning);
      _dataAll.required = parseInt(_dataAll.required);
      _dataAll.elective = parseInt(_dataAll.elective);
      this.dataForm = _dataAll;
    },
  },
};
</script>
<style lang="scss" scoped>
.box-row-group {
  margin-bottom: 12px;
  border: 1px solid #f0f0f0;
  >>> .el-form-item {
    margin-top: 18px;
  }
}
</style>
